<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">

    <title>自定义菜单</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{../webjars/bootstrap/4.1.0/css/bootstrap.css}" rel="stylesheet">

    <link rel="stylesheet" href="../css/menu.css"/>
    <!--<link href="../css/index.css" rel="stylesheet">-->
</head>

<body class="bg-light">
<div class="container-fluid">
    <div th:replace="common::navBar"></div>
    <div class="row">
        <div th:replace="common::sideBar"></div>
        <input type="hidden" th:attr="data-id=${id}" id="accountId">
        <!--<h2>菜单管理</h2>-->
        <div class="col-md-4">
            <div class="left-container">
                <dl th:each="menu : ${menu}">
                    <dt th:if="${menu} != null">
                        <a onclick="choose(this)" th:attr="link=${#lists.isEmpty(menu.sub_button)}?${menu.url}">[[${menu.name}]]</a>
                    </dt>
                    <dd th:if="${menu.sub_button} != null">
                        <a onclick="choose(this)" th:attr="link=${button.url}" th:each="button : ${menu.sub_button}">[[${button.name}]]</a>
                    </dd>
                </dl>

            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">编辑</h3>
                    <button class="btn btn-success btn-sm effect-menu">生效</button>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <label for="title" class="col-md-2 control-label">标题</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" id="title" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="link" class="col-md-2 control-label">链接</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" id="link" placeholder="">
                        </div>
                    </div>
                    <button class="btn btn-primary btn-sm add-root-menu">添加一级菜单</button>
                    <button class="btn btn-primary btn-sm add-menu">添加菜单</button>
                    <button class="btn btn-danger btn-sm del-menu">删除菜单</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{../webjars/jquery/3.3.1-1/jquery.js}"></script>
<!--<script th:src="@{/webjars/jquery-slim/3.0.0/dist/jquery.slim.js}"></script>-->
<script th:src="@{../webjars/bootstrap/4.1.0/js/bootstrap.js}"></script>
<script>
    $(".add-root-menu").click(function () {
        var root = $(".left-container");
        var title = $(this).parent().find("#title").val();
        var link = $(this).parent().find("#link").val();
        if (root.find("dl").length >= 3) {
            alert("1级菜单最多3个")
        } else {
            $(".left-container").append("<dl><dt><a link='" + link + "' onclick='choose(this)'>" + title + "</a></dt></dl>");
        }
    })

    function choose(_this) {
        $(".left-container").find("a").removeClass("active");
        var a = $(_this);
        a.addClass("active");
        $("#title").val(a.text());
        $("#link").val(a.attr("link"));
    }

    $(".add-menu").click(function () {
        var _this = $(".left-container").find(".active");
        if (_this.length > 0 && _this.parent()[0].tagName == "DT") {
            var title = $(this).parent().find("#title").val();
            var link = $(this).parent().find("#link").val();
            if (_this.parent().parent().find("dd").length == 0) {
                _this.attr("link", "").parent().parent().append("<dd><a link='" + link + "' onclick='choose(this)'>" + title + "</a></dd>")
            } else if (_this.parent().parent().find("dd").find("a").length >= 5) {
                alert("每个1级菜单最多有5个二级菜单")
            } else {
                _this.attr("link", "").parent().parent().find("dd").append("<a link='" + link + "' onclick='choose(this)'>" + title + "</a>")
            }
        } else {
            alert("请选择需要添加的1级菜单")
        }
    })

    $(".del-menu").click(function () {
        var _this = $(".left-container").find(".active");
        var parent = _this.parent();
        if (parent[0].tagName == "DD") {
            if (parent.find("a").length == 1) {
                parent.remove()
            } else {
                _this.remove();
            }
        } else {
            parent.parent().remove();
        }
    })

    $(".effect-menu").click(function () {
        var menu = $(".left-container").find("dl");
        var arr = new Array();
        menu.each(function () {
            var a = this;
            var button = '';
            if ($(a).find("dd").length > 0 && $(a).find("dd").find("a").length > 0) {
                button += '{"name":"' + $(a).find("dt").find("a").text() + '",'
                button += '"sub_button":['
                $(a).find("dd").find("a").each(function () {
                    button += '{"name":"' + $(this).text() + '","type":"view","url":"' + $(this).attr("link") + '"},';
                })
                button = button.substr(0, button.length - 1);
                button += ']}';
                arr.push(button);
                button = '';
            } else {
                button += '{"name":"' + $(a).text().trim() + '", "type":"view","url":"' + $(a).find("a").attr("link") + '"}'
                arr.push(button);
                button = '';
            }
        })
        console.log('{"button":[' + arr + ']}');
        var accountId = $("#accountId").attr("data-id")

        $.ajax({
            url: '../createMenu',
            type: 'POST', //GET
            async: true,    //或false,是否异步
            data: {
                menu: '{"button":[' + arr + ']}',
                id: accountId
            },
            timeout: 5000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend: function (xhr) {
                console.log(xhr)
                console.log('发送前')
            },
            success: function (data) {
                alert(data.msg);
                console.log(data)
            },
            error: function (xhr, textStatus) {
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            },
            complete: function () {
                console.log('结束')
            }

        })
    })

</script>
</body>
</html>